<template>
  <view class="favorite-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-left">
        <view class="back-btn" @tap="goBack">
          <uni-icons type="left" size="20" color="#2D3748"></uni-icons>
        </view>
        <text class="page-title">我的收藏</text>
      </view>
      <view class="header-right">
        <view class="edit-btn" @tap="toggleEditMode">
          <text>{{ isEditMode ? '完成' : '编辑' }}</text>
        </view>
      </view>
    </view>

    <!-- 统计信息 -->
    <view v-if="favoriteList.length > 0" class="stats-section">
      <view class="stats-card">
        <view class="stats-item">
          <text class="stats-number">{{ favoriteList.length }}</text>
          <text class="stats-label">收藏商品</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-number">{{ selectedCount }}</text>
          <text class="stats-label">已选择</text>
        </view>
        <view class="stats-divider"></view>
        <view class="stats-item">
          <text class="stats-number">¥{{ totalValue }}</text>
          <text class="stats-label">总价值</text>
        </view>
      </view>
    </view>
    
    <!-- 收藏列表 -->
    <view v-if="favoriteList.length > 0" class="favorite-list">
      <view 
        v-for="(item, index) in favoriteList" 
        :key="index"
        class="favorite-item"
        :class="{ 'edit-mode': isEditMode, 'selected': item.selected }"
        @tap="handleItemTap(item, index)"
      >
        <!-- 选择框 -->
        <view v-if="isEditMode" class="item-checkbox" @tap.stop="toggleSelect(index)">
          <view class="checkbox" :class="{ 'checked': item.selected }">
            <uni-icons v-if="item.selected" type="checkmarkempty" size="16" color="#fff"></uni-icons>
          </view>
        </view>

        <view class="item-content">
          <view class="item-image-wrapper">
            <image :src="item.image" mode="aspectFill" class="item-image"></image>
            <view v-if="item.discount" class="discount-badge">
              <text>{{ item.discount }}折</text>
            </view>
            <view class="favorite-icon">
              <uni-icons type="heart-filled" size="20" color="#FF6B6B"></uni-icons>
            </view>
          </view>
          
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <view class="item-specs">
              <text class="spec-text">规格: {{ item.spec || '500ml' }}</text>
              <view class="rating">
                <uni-icons type="star-filled" size="12" color="#FFD93D"></uni-icons>
                <text class="rating-text">{{ item.rating || 4.8 }}</text>
              </view>
            </view>
            <view class="item-tags">
              <text v-if="item.freeShipping" class="tag free-shipping">包邮</text>
              <text v-if="item.authentic" class="tag authentic">正品保证</text>
              <text v-if="item.hot" class="tag hot">热销</text>
            </view>
            <view class="price-action">
              <view class="price-section">
                <text class="current-price">¥{{ parseFloat(item.price || 0).toFixed(2) }}</text>
                <text v-if="item.originalPrice" class="original-price">¥{{ parseFloat(item.originalPrice || 0).toFixed(2) }}</text>
              </view>
              <view v-if="!isEditMode" class="action-buttons">
                <button class="add-cart-btn" @tap.stop="addToCart(item)">
                  <uni-icons type="shop" size="16" color="#667eea"></uni-icons>
                </button>
              </view>
            </view>
          </view>
        </view>

        <!-- 删除按钮 -->
        <view v-if="!isEditMode" class="remove-btn" @tap.stop="removeFavorite(index)">
          <uni-icons type="heart-filled" size="20" color="#FF6B6B"></uni-icons>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-else class="empty-state">
      <view class="empty-animation">
        <view class="heart-icon">
          <uni-icons type="heart" size="80" color="#FFE4E1"></uni-icons>
        </view>
        <view class="floating-hearts">
          <view class="floating-heart heart-1">💖</view>
          <view class="floating-heart heart-2">💕</view>
          <view class="floating-heart heart-3">💗</view>
        </view>
      </view>
      <text class="empty-title">还没有收藏商品</text>
      <text class="empty-desc">快去收藏心仪的商品吧</text>
      <button class="go-shopping-btn" @tap="goShopping">
        <uni-icons type="home" size="16" color="#fff"></uni-icons>
        <text>去逛逛</text>
      </button>
    </view>

    <!-- 底部操作栏 -->
    <view v-if="favoriteList.length > 0 && isEditMode" class="bottom-bar">
      <view class="select-all" @tap="toggleSelectAll">
        <view class="checkbox" :class="{ 'checked': isAllSelected }">
          <uni-icons v-if="isAllSelected" type="checkmarkempty" size="16" color="#fff"></uni-icons>
        </view>
        <text>全选</text>
      </view>
      
      <view class="bottom-actions">
        <button class="action-btn secondary" @tap="addSelectedToCart" :disabled="selectedCount === 0">
          <uni-icons type="shop" size="16" color="#667eea"></uni-icons>
          <text>加入购物车</text>
        </button>
        <button class="action-btn danger" @tap="removeSelected" :disabled="selectedCount === 0">
          <uni-icons type="trash" size="16" color="#fff"></uni-icons>
          <text>删除</text>
        </button>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="bottom-safe"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isEditMode: false,
      favoriteList: [
        {
          id: 1,
          name: '百泰 60%唑醚代森联 水分散粒剂',
          price: 99.00,
          originalPrice: 120.00,
          sales: 158,
          spec: '500ml',
          rating: 4.8,
          image: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          discount: 8.3,
          freeShipping: true,
          authentic: true,
          hot: true,
          selected: false
        },
        {
          id: 2,
          name: '亩旺特 22.4%螺虫乙酯 悬浮剂',
          price: 168.50,
          originalPrice: 180.00,
          sales: 234,
          spec: '200ml',
          rating: 4.9,
          image: 'http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
          freeShipping: true,
          authentic: true,
          selected: false
        }
      ]
    }
  },

  computed: {
    // 是否全选
    isAllSelected() {
      return this.favoriteList.length > 0 && this.favoriteList.every(item => item.selected)
    },

    // 选中数量
    selectedCount() {
      return this.favoriteList.filter(item => item.selected).length
    },

    // 总价值
    totalValue() {
      return this.favoriteList.reduce((total, item) => total + item.price, 0).toFixed(2)
    }
  },
  
  onLoad() {
    this.loadFavoriteList()
  },
  
  methods: {
    // 返回
    goBack() {
      uni.navigateBack()
    },

    // 切换编辑模式
    toggleEditMode() {
      this.isEditMode = !this.isEditMode
      if (!this.isEditMode) {
        // 退出编辑模式时清除所有选择
        this.favoriteList.forEach(item => {
          item.selected = false
        })
      }
    },

    // 处理项目点击
    handleItemTap(item, index) {
      if (this.isEditMode) {
        this.toggleSelect(index)
      } else {
        this.goToDetail(item.id)
      }
    },

    // 切换选择状态
    toggleSelect(index) {
      this.favoriteList[index].selected = !this.favoriteList[index].selected
    },

    // 全选/取消全选
    toggleSelectAll() {
      const selectAll = !this.isAllSelected
      this.favoriteList.forEach(item => {
        item.selected = selectAll
      })
    },

    // 加载收藏列表
    loadFavoriteList() {
      // 模拟从本地存储加载收藏列表
      const savedFavorites = uni.getStorageSync('favoriteList') || []
      if (savedFavorites.length === 0) {
        // 如果没有保存的收藏，使用默认数据
        uni.setStorageSync('favoriteList', this.favoriteList)
      } else {
        this.favoriteList = savedFavorites.map(item => ({
          ...item,
          selected: false
        }))
      }
    },
    
    // 移除收藏
    removeFavorite(index) {
      uni.showModal({
        title: '确认取消收藏',
        content: '确定要取消收藏这个商品吗？',
        success: (res) => {
          if (res.confirm) {
            const item = this.favoriteList[index]
            this.favoriteList.splice(index, 1)
            
            // 保存到本地存储
            uni.setStorageSync('favoriteList', this.favoriteList)
            
            uni.showToast({
              title: '已取消收藏',
              icon: 'success'
            })
          }
        }
      })
    },

    // 删除选中的商品
    removeSelected() {
      const selectedItems = this.favoriteList.filter(item => item.selected)
      
      uni.showModal({
        title: '确认删除',
        content: `确定要删除选中的${selectedItems.length}个商品吗？`,
        success: (res) => {
          if (res.confirm) {
            this.favoriteList = this.favoriteList.filter(item => !item.selected)
            uni.setStorageSync('favoriteList', this.favoriteList)
            
            uni.showToast({
              title: `已删除${selectedItems.length}个商品`,
              icon: 'success'
            })

            // 如果删除后没有商品了，退出编辑模式
            if (this.favoriteList.length === 0) {
              this.isEditMode = false
            }
          }
        }
      })
    },

    // 添加到购物车
    addToCart(item) {
      // 模拟添加到购物车
      uni.showToast({
        title: '已加入购物车',
        icon: 'success'
      })
    },

    // 批量添加到购物车
    addSelectedToCart() {
      const selectedItems = this.favoriteList.filter(item => item.selected)
      
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请选择要加入购物车的商品',
          icon: 'none'
        })
        return
      }

      uni.showToast({
        title: `已将${selectedItems.length}个商品加入购物车`,
        icon: 'success'
      })

      // 清除选择状态
      this.favoriteList.forEach(item => {
        if (item.selected) {
          item.selected = false
        }
      })
    },
    
    // 跳转到商品详情
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${id}`
      })
    },
    
    // 去购物
    goShopping() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style lang="scss">
.favorite-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
  padding-bottom: 140rpx;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F7FAFC;
  margin-right: 20rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2D3748;
}

.edit-btn {
  padding: 12rpx 24rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 500;
}

.stats-section {
  padding: 30rpx;
}

.stats-card {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 8rpx 30rpx rgba(102, 126, 234, 0.3);
}

.stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}

.stats-number {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.stats-label {
  font-size: 24rpx;
  opacity: 0.9;
}

.stats-divider {
  width: 1rpx;
  height: 60rpx;
  background: rgba(255, 255, 255, 0.3);
}

.favorite-list {
  padding: 0 20rpx;
}

.favorite-item {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
}

.favorite-item.edit-mode {
  padding-left: 80rpx;
}

.favorite-item.selected {
  transform: scale(0.98);
  box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.2);
}

.favorite-item:active {
  transform: scale(0.98);
}

.item-checkbox {
  position: absolute;
  left: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #E2E8F0;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkbox.checked {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
}

.item-content {
  display: flex;
  padding: 30rpx;
  width: 100%;
}

.item-image-wrapper {
  position: relative;
  margin-right: 24rpx;
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
}

.discount-badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: #fff;
  font-size: 20rpx;
  padding: 6rpx 10rpx;
  border-radius: 10rpx;
  font-weight: bold;
}

.favorite-icon {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  width: 40rpx;
  height: 40rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 28rpx;
  color: #2D3748;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.item-specs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}

.spec-text {
  font-size: 24rpx;
  color: #718096;
}

.rating {
  display: flex;
  align-items: center;
  
  .rating-text {
    font-size: 22rpx;
    color: #FFD93D;
    margin-left: 4rpx;
    font-weight: 500;
  }
}

.item-tags {
  display: flex;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.tag {
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 8rpx;
  font-weight: 500;
}

.tag.free-shipping {
  background: #E8F5E8;
  color: #38A169;
}

.tag.authentic {
  background: #EBF8FF;
  color: #3182CE;
}

.tag.hot {
  background: #FFF5F5;
  color: #E53E3E;
}

.price-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.current-price {
  font-size: 32rpx;
  color: #E53E3E;
  font-weight: bold;
}

.original-price {
  font-size: 24rpx;
  color: #A0AEC0;
  text-decoration: line-through;
}

.action-buttons {
  display: flex;
  gap: 12rpx;
}

.add-cart-btn {
  width: 60rpx;
  height: 60rpx;
  background: linear-gradient(135deg, #F7FAFC, #EDF2F7);
  border: 2rpx solid #E2E8F0;
  border-radius: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.add-cart-btn:active {
  transform: scale(0.95);
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-color: #667eea;
  
  ::v-deep uni-icons {
    color: #fff !important;
  }
}

.remove-btn {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  width: 50rpx;
  height: 50rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10rpx);
  transition: all 0.3s ease;
}

.remove-btn:active {
  transform: scale(0.9);
  background: #FFF5F5;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  min-height: 60vh;
}

.empty-animation {
  position: relative;
  margin-bottom: 50rpx;
}

.heart-icon {
  position: relative;
  z-index: 2;
}

.floating-hearts {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.floating-heart {
  position: absolute;
  font-size: 30rpx;
  animation: float-heart 3s ease-in-out infinite;
  opacity: 0.7;
}

.heart-1 {
  top: -20rpx;
  left: -30rpx;
  animation-delay: 0s;
}

.heart-2 {
  top: -10rpx;
  right: -20rpx;
  animation-delay: 1s;
}

.heart-3 {
  bottom: -10rpx;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 2s;
}

@keyframes float-heart {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-10rpx) rotate(5deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-5rpx) rotate(-3deg);
    opacity: 0.8;
  }
  75% {
    transform: translateY(-15rpx) rotate(3deg);
    opacity: 0.9;
  }
}

.empty-title {
  font-size: 32rpx;
  color: #4A5568;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.empty-desc {
  font-size: 26rpx;
  color: #718096;
  margin-bottom: 60rpx;
}

.go-shopping-btn {
  display: flex;
  align-items: center;
  padding: 24rpx 48rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: #fff;
  border-radius: 50rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 8rpx 30rpx rgba(255, 107, 107, 0.3);
  transition: all 0.3s ease;
  
  text {
    margin-left: 8rpx;
  }
}

.go-shopping-btn:active {
  transform: scale(0.95);
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.select-all {
  display: flex;
  align-items: center;
  
  text {
    font-size: 28rpx;
    color: #2D3748;
    margin-left: 12rpx;
    font-weight: 500;
  }
}

.bottom-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 20rpx 30rpx;
  border-radius: 50rpx;
  font-size: 26rpx;
  font-weight: 500;
  border: none;
  transition: all 0.3s ease;
}

.action-btn.secondary {
  background: #F7FAFC;
  color: #667eea;
  border: 2rpx solid #E2E8F0;
}

.action-btn.secondary:active {
  background: #EDF2F7;
  transform: scale(0.95);
}

.action-btn.danger {
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: #fff;
  box-shadow: 0 4rpx 15rpx rgba(255, 107, 107, 0.3);
}

.action-btn.danger:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.5);
}

.action-btn:disabled {
  opacity: 0.5;
  transform: none !important;
}

.action-btn::after {
  border: none;
}

.bottom-safe {
  height: env(safe-area-inset-bottom);
  height: constant(safe-area-inset-bottom);
}
</style> 